<template>
  <el-form ref="form" label-width="100px" :model="modelProps" :inline="inline">
    <!-- 遍历formLabel 根据类型显示不同的form框-->
    <el-form-item v-for="item of formlabel" :key="item.label" :label="item.label">

      <el-input v-if="item.type === 'input'" :placeholder="'请输入' + item.label" v-model="modelProps[item.model]">
      </el-input>

      <el-input v-else-if="item.type === 'password'" :placeholder="'请输入' + item.label" v-model="modelProps[item.model]"
        type="password">
      </el-input>

      <el-switch v-else-if="item.type === 'switch'" v-model="modelProps[item.model]"></el-switch>

      <el-date-picker v-else-if="item.type === 'date'" type="date" placeholder="选择日期" format="YYYY/MM/DD"
        value-format="YYYY-MM-DD" v-model="modelProps[item.model]"></el-date-picker>

      <el-select v-else-if="item.type === 'select'" placeholder="请选择" v-model="modelProps[item.model]">
        <el-option v-for="opt of item.opts" :key="opt.label" :label="opt.label" :value="opt.value"></el-option>
      </el-select>

    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue';
const props = defineProps({
  form: {
    type: Object,
    default: () => { }
  },
  formlabel: {
    type: Object,
  },
  inline: {
    type: Boolean
  }
})

let modelProps = ref<any>({})
watch(
  () => props.form,
  (val: any) => {
    modelProps.value = val
  },
  { immediate: true, deep: true }
);

</script>


<style lang="less">
</style>